<template>
  <div>

    <div class="loading_02" v-if="mode == 'loading1'||mode == 'loading2'">
      <image v-if="mode == 'loading1'" class="loading_img_01" :src="assetsUrl+'static/images/loading.gif'" />
      <image v-if="mode == 'loading2'" class="loading_img_02" :src="assetsUrl+'static/images/loading_bg.gif'"/>
      <p class="desc" v-if="showTitle">正在载入...</p>
    </div>
   <div v-if="mode == 'loading3'" class="loading_03">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /* loading 样式 */
    mode: {
      type: String,
      default: "loading1",
    },
    /* 显示文本 */
    showTitle: {
      type: Boolean,
      default: false,
    },
    assetsUrl:{
      type: String,
      default: "https://6365-ceart-d4onv-1301709499.tcb.qcloud.la/",
    }
  },
};
</script>


<style lang="stylus" scoped>

  @-webkit-keyframes load
    0%,100%
      height 80rpx
      background lightgreen

    50%
      height 140rpx
      margin -30rpx 0
      background lightblue

  .loading_02
    width 100%
    display flex
    flex-direction column
    justify-content flex-start
    align-items center
    .loading_img_01
      height 48rpx
      width 48rpx
    .loading_img_02
      height 194rpx
      width 142rpx

    .desc
      line-height 40rpx
      font-size 24rpx
      color #999
  .loading_03
    width 160rpx
    height 80rpx
    display flex
    justify-content space-around
    align-items center
    span
      display inline-block
      width 16rpx
      height 100%
      border-radius 4px
      background lightgreen
      -webkit-animation load 1s ease infinite

      &:nth-child(2)
        -webkit-animation-delay 0.2s
      &:nth-child(3)
        -webkit-animation-delay 0.4s
      &:nth-child(4)
        -webkit-animation-delay 0.6s
      &:nth-child(5)
        -webkit-animation-delay 0.8s
</style>
